<template>
  <div>
    <a-dropdown :trigger="['click']">
      <a class="ant-dropdown-link">
        {{ startTime }}~{{ endTime }}
        <a-icon type="down" />
      </a>
      <a-menu slot="overlay">
        <a-menu-item :class="type==='sevenDay'?'activeClass':''">
          <a
            href="javascript:;"
            @click="choseType('sevenDay')"
          >{{ $t('lastSeven') }}</a>
        </a-menu-item>
        <a-menu-item :class="type==='thirtyDay'?'activeClass':''">
          <a
            href="javascript:;"
            @click="choseType('thirtyDay')"
          >{{ $t('lastthirty') }}</a>
        </a-menu-item>
        <a-menu-item :class="type==='autoDay'?'activeClass':''">
          <a
            href="javascript:;"
            @click="choseType('autoDay')"
          >{{ $t('autoTime') }}</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
    <div ref="dataRange">
      <a-range-picker
        v-if="openRange"
        :open="openRange"
        showTime
        :defaultValue="[moment(startTime, dateFormat), moment(endTime, dateFormat)]"
        :format="dateFormat"
        @ok="changeTime"
        :disabled-date="disabledDate"
      />
    </div>
  </div>

</template>
<script>
import moment from 'moment'
export default {
  props: {
    dateFormat: {
      type: String,
      default: 'YYYY-MM-DD'
    },
    // 截至日期是何时
    delayDays: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
      type: 'sevenDay', // 时间类型
      openRange: false, // 控制时间组件是否展示
      startTime: moment(new Date().getTime()).format('YYYY-MM-DD'), // 开始时间
      endTime: moment(new Date().getTime()).format('YYYY-MM-DD') // 结束时间
    }
  },
  mounted () {
    this.timeInit(7)
  },
  methods: {
    //   切换时间，开始和结束计算时间公共函数
    timeInit (count) {
      // eslint-disable-next-line no-mixed-operators
      const beginTime = new Date().getTime().valueOf() - this.delayDays * 24 * 60 * 60 * 1000
      // eslint-disable-next-line no-mixed-operators
      this.startTime = moment(beginTime - count * 24 * 60 * 60 * 1000).format('YYYY-MM-DD')
      this.endTime = moment(beginTime).format('YYYY-MM-DD')
    },
    moment,
    // 切换时间类型
    choseType (type) {
      const vm = this
      if (type === 'sevenDay') {
        vm.type = 'sevenDay'
        vm.openRange = false
        vm.timeInit(7)
        vm.$emit('changeData') // 请求数据
      } else if (type === 'thirtyDay') {
        vm.type = 'thirtyDay'
        vm.openRange = false
        vm.timeInit(30)
        vm.$emit('changeData') // 请求数据
      } else if (type === 'autoDay') {
        vm.type = 'autoDay'
        vm.openRange = true
      }
    },
    // 自选时间“确定”
    changeTime (date) {
      const vm = this
      vm.startTime = date[0].format('YYYY-MM-DD')
      vm.endTime = date[1].format('YYYY-MM-DD')
      vm.$emit('changeData') // 请求数据
      vm.openRange = false
    },
    // 超出限制范围不可选择
    disabledDate (current) {
      // eslint-disable-next-line no-mixed-operators
      const beginTime = new Date().getTime().valueOf() - this.delayDays * 24 * 60 * 60 * 1000
      const currentDis = current && current > beginTime
      // eslint-disable-next-line no-mixed-operators
      const twoYearDis = current && current < beginTime - 2 * 365 * 24 * 60 * 60 * 1000
      return currentDis || twoYearDis
    }
  }
}
</script>
<style scoped lang='less'>
.activeClass {
  background: #1890ff;
  a {
    color: #fff;
  }
}
</style>
